<template>
  <el-dropdown style="margin:0 5px" @command="handleCommand">
    <div>
      <svg-icon style="color:#fff; font-size:20px; " icon-class="language" />
    </div>

    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="en" :class="{active:$root.$i18n.locale==='en'}">English</el-dropdown-item>
      <el-dropdown-item command="zh" :class="{active:$root.$i18n.locale==='zh'}">中文</el-dropdown-item>

    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
import Cookies from 'js-cookie'

export default {
  name: 'SelectLang',
  data() {
    return {}
  },
  created() {

  },
  methods: {
    handleCommand(type) {
      this.$root.$i18n.locale = type
      Cookies.set('lang', type, { expires: 7 })
      location.reload()
      this.$message.success('success')
    }
  }
}
</script>

<style scoped lang='scss'>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.active {
  background-color: #ecf5ff;
  color: #66b1ff;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
